<template>
  <div style="height: 100vh;background-color: #f1f1f1;">
    <head-nav :isBack="isBack"></head-nav>
    <div class="zanwei-top"></div>
    <div class="newsContent">
      <div class="topImg" @click="goDetail(topNews.WZID)">
        <div class="img_box" :style="{height: topImgHeight+'px'}">
          <img ref="topimg" :src="topNews.TP[0]">
          <div class="title">{{topNews.WZBT}}</div>
        </div>
      </div>
      <div class="newlist">
        <div class="newsItem" v-for="item in newsList" @click="goDetail(item.WZID)">
          <div>{{item.WZBT}}</div>
          <img :src="item.TP[0]">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import api from '@/api/api'

  export default {
    name: "NewsHome",
    data() {
      return {
        isBack: false,
        topImgHeight: 0,
        newsList: [],
        topNews: {TP: ''},
      }
    },
    methods: {
      goDetail(id) {
        this.$router.push('detail/' + id)
      }
    },
    mounted() {
      let that = this;
      this.topImgHeight = this.$refs.topimg.clientWidth / 2;
      let userinfo = sessionStorage.getItem('userinfo');
      userinfo = JSON.parse(userinfo);
      if (userinfo == null || userinfo.vipcode === "") {// 未登录
      	that.$router.push({path: '/register'});
      } else {
        api.sendWx(this, userinfo.openid, res => {
          let list = res.data.data;
          let rows = list.map(y => {
            y.TP = y.TP.map(x => {
              return that.host.filehost + x.ID
            });
            return y
          });
          console.log(rows);
          that.topNews = rows[0];
          that.newsList = rows.slice(1, list.length);
        })
      }
      
    }
  }
</script>

<style scoped lang="less">
  .newsContent {
    padding: .2rem;
  }

  .topImg {
    width: 100%;
    box-sizing: border-box;
    border-top-left-radius: .05rem;
    border-top-right-radius: .05rem;
    overflow: hidden;
    .img_box {
      position: relative;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      > img {
        width: 100%;
      }
      .title {
        position: absolute;
        color: #fff;
        width: 100%;
        bottom: 0;
        padding: .2rem;
        box-sizing: border-box;
        background: linear-gradient(to bottom, rgba(1, 1, 1, 0.03), rgba(1, 1, 1, 0.5));
      }
    }
  }

  .newlist {
    border-bottom-left-radius: .05rem;
    border-bottom-right-radius: .05rem;
    overflow: hidden;
    :last-child {
      div {
        border-bottom: 0;
      }
    }
  }

  .newsItem {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 500ms all;
    &:active {
      background-color: #eee;
    }
    > img {
      height: .8rem;
      width: .8rem;
      margin: 0 .2rem;
    }
    > div {
      border-bottom: 1px solid #eee;
      flex: 1;
      height: .8rem;
      margin-left: .2rem;
      padding: .12rem 0;
      display: flex;
      align-items: center;
    }
  }
</style>
